<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select name="" id="selProvince">
      <option value=""></option>
    </select>

    <script>
      function getProvinces() {
        return fetch("https://study.duyiedu.com/api/citylist")
          .then((resp) => resp.json())
          .then((resp) => resp.data)
          .then((resp) =>
            resp.map((it) => ({ value: it.value, label: it.label }))
          );
      }

      getProvinces().then((val) => {
        const selProvinceEl = document.querySelector("#selProvince");
        selProvinceEl.innerHTML = val.map(
          (o) => `<option value=${o.value}>${o.label}</option>`
        );
      });
    </script>
  </body>
</html>
